<template>
	<view>
		<u-sticky>
			<view style="background-color: #fff;padding: 20rpx;">
				<u-search v-model="searchInput" :show-action="true" actionText="搜索" :animation="true" @blur="clickSearch"></u-search>
				<view class="tagBar">
					<view class="tagBox" @click="chooseBrand">
						<text class="title" :class="{'activeTile': brandId.length>0}">{{brandName}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view v-if="listType == 2 || listType == 3" class="tagBox" @click="chooseSeries">
						<text class="title" :class="{'activeTile': seriesId.length>0}">{{seriesName}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view v-if="listType == 3" class="tagBox">
						<text class="title" :class="{'activeTile': modelId.length>0}">{{modelName}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			
		</u-sticky>
		
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="item.id" @click="chooseItem(item)">
				<text class="title">{{item.name}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		apiBrandList,
		apiSeriesList,
		apiModelList
	} from '@/api/home-api.js';
	export default {
		data() {
			return {
				listType : 1, //1 品牌 2 车系 3车型
				searchInput: '',
				brandId: '',
				brandName: '品牌',
				seriesId: '',
				seriesName: '车系',
				modelId: '',
				modelName: '车型',
				list: []
			}
		},
		onLoad() {
           this.getBrandData();
		},
		computed:{
		   carInfo() {
			   return this.brandName + '/' + this.seriesName + '/' + this.modelName
		   }	
		},
		methods: {
			//列表的点击事件
			chooseItem(item) {
				if(this.listType == 1) {//选择品牌
					this.brandId = item.id;
					this.brandName = item.name;
					this.listType = 2;
					this.searchInput = '';
					this.getseriesData();
				}else if(this.listType == 2) {//选择车系
					this.seriesId = item.id;
					this.seriesName = item.name;
					this.listType = 3;
					this.searchInput = '';
					this.getModelData();
				}else if(this.listType == 3) {//选择车型
					this.modelId = item.id;
					this.modelName = item.name;
					
					var car = {
						brandId : this.brandId,
						brandName : this.brandName,
						seriesId : this.seriesId,
						seriesName : this.seriesName,
						modelId: this.modelId,
						modelName: this.modelName,
						carInfo: this.carInfo
					}
					uni.$emit('chooseCarInfo', car);
					uni.navigateBack({
					
					})
					
				}
                
			},
			
			clickSearch(value) {
				console.log('进来了');
				this.searchInput = value;
				if(this.listType == 1) {//品牌搜索
					this.getBrandData();
				}else if(this.listType == 2) {//车系搜索
					this.getseriesData();
				}else if(this.listType == 3) {//车型搜索
					this.getModelData();
				}
			},
			
			//获取品牌
			getBrandData() {
				apiBrandList({
					brandName: this.searchInput
				}).then(res => {
					this.list = res.data;
				})
			},
			//获取车系
			getseriesData() {
				apiSeriesList({
					brandId: this.brandId,
					seriesName: this.searchInput
				}).then(res => {
					this.list = res.data;
				})
			},
			//获取车型
			getModelData() {
				apiModelList({
					brandId: this.brandId,
					seriesId: this.seriesId,
					modelName: this.searchInput
				}).then(res => {
					this.list = res.data;
				})
			},

			//选择品牌
			chooseBrand() {
               this.brandId = '';
			   this.brandName = '品牌';
			   this.seriesId = '';
			   this.seriesName = '车系';
			   this.listType = 1;
			   this.getBrandData();
			},
			// 选择车系
			chooseSeries() {
                this.seriesId = '';
                this.seriesName = '车系';
				this.modelId = '';
				this.modelName= '车型';
				this.listType = 2;
				this.getseriesData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tagBar {
		margin-top: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
	}

	.tagBox {
		display: flex;
		margin-right: 20rpx;
	}

	.title {
		color: #333;
		font-size: 30rpx;
	}
	
	.activeTile {
		color: $uni-color-primary;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		// border-bottom: 1px solid #333;
		padding: 10rpx;
	}
</style>
